<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'

// 创建路由实例
const router = useRouter()

// 导航栏缩放状态
const isNavbarScaled = ref(false)

// 滚动阈值：当滚动超过此值时缩放导航栏
const SCROLL_THRESHOLD = 400

// 可见性阈值：距离视口多少像素内元素开始出现或消失
const VISIBILITY_THRESHOLD = 200

// 内容包装器引用
const contentWrapperRef = ref<HTMLElement | null>(null)

// 存储所有需要监控可见性的区域元素
const sectionElements = ref<HTMLElement[]>([])

// 处理滚动事件的函数
const handleScroll = () => {
  if (!contentWrapperRef.value) return

  // 获取当前滚动位置
  const scrollPosition = contentWrapperRef.value.scrollTop

  // 根据滚动位置决定是否缩放导航栏
  isNavbarScaled.value = scrollPosition > SCROLL_THRESHOLD
  
  // 更新所有区域的可见性状态
  updateSectionsVisibility()
}

// 更新所有区域的可见性状态
const updateSectionsVisibility = () => {
  if (!contentWrapperRef.value || sectionElements.value.length === 0) return
  
  const containerHeight = contentWrapperRef.value.clientHeight
  const scrollPosition = contentWrapperRef.value.scrollTop
  
  // 计算可见区域的顶部和底部边界
  const containerTop = scrollPosition
  const containerBottom = containerTop + containerHeight
  
  // 遍历所有区域元素，计算其可见性
  sectionElements.value.forEach(section => {
    // 获取元素相对于滚动容器的位置
    const rect = section.getBoundingClientRect()
    const sectionTop = rect.top + scrollPosition - contentWrapperRef.value.offsetTop
    const sectionBottom = sectionTop + rect.height
    
    // 计算元素顶部与容器的距离
    const distanceFromTop = sectionTop - containerTop
    
    // 恢复默认样式
    section.style.opacity = '1'
    section.style.filter = 'blur(0px)'
    
    // 当元素即将完全离开屏幕时，添加隐藏类
    if (Math.abs(distanceFromTop) > containerHeight) {
      section.classList.add('section-hidden')
    } else {
      section.classList.remove('section-hidden')
    }
  })
}

// 平滑滚动到特定区域
const scrollToSection = (sectionId: string) => {
  const element = document.getElementById(sectionId)
  if (element) {
    element.scrollIntoView({ 
      behavior: 'smooth',
      block: 'start'
    })
  }
}

// 处理导航栏聚焦事件
const handleNavbarFocus = () => {
  // 如果导航栏处于缩放状态，恢复原始大小
  if (isNavbarScaled.value) {
    isNavbarScaled.value = false
  }
}

// 处理导航栏鼠标悬停事件
const handleNavbarHover = () => {
  // 如果导航栏处于缩放状态，恢复原始大小
  if (isNavbarScaled.value) {
    isNavbarScaled.value = false
  }
}

// 初始化区域元素引用
const initSectionElements = () => {
  if (contentWrapperRef.value) {
    // 获取所有section元素
    const sections = contentWrapperRef.value.querySelectorAll('section')
    sectionElements.value = Array.prototype.slice.call(sections) as HTMLElement[]
    
    // 初始化所有区域的可见性
    updateSectionsVisibility()
  }
}

// 进入博客的方法
const enterBlog = () => {
  router.push('/')
}

// 添加滚动事件监听器
onMounted(() => {
  nextTick(() => {
    const wrapper = document.querySelector('.content-wrapper')
    if (wrapper) {
      contentWrapperRef.value = wrapper as HTMLElement
      wrapper.addEventListener('scroll', handleScroll)
      
      // 初始化区域元素引用
      initSectionElements()
    }
  })
})

// 移除滚动事件监听器，防止内存泄漏
onUnmounted(() => {
  if (contentWrapperRef.value) {
    contentWrapperRef.value.removeEventListener('scroll', handleScroll)
  }
})
</script>

<template>
  <div class="info-container">
    <div class="background-animation"></div>
    <nav 
      class="top-navbar" 
      :class="{ 'scaled': isNavbarScaled }"
      @focus="handleNavbarFocus"
      @mouseenter="handleNavbarHover"
      tabindex="0"
    >
      <div class="navbar-logo">AI-Blog</div>
      <div class="navbar-menu">
        <a href="#" class="navbar-item" @click.prevent="enterBlog">进入AI博客</a>
        <a href="#" class="navbar-item">关于</a>
        <a href="#" class="navbar-item">登录</a>
      </div>
    </nav>
    <div class="content-wrapper" ref="contentWrapperRef">
      <!-- 首屏介绍区域 -->
      <section class="hero-section">
        <div class="hero-content">
          <h1 class="hero-title">智能驱动的博客平台</h1>
          <p class="hero-subtitle">探索AI技术，分享创新思想</p>
          <div class="hero-cta">
            <a href="#" class="btn btn-primary" @click.prevent="scrollToSection('detailed-intro')">开始探索</a>
            <a href="#" class="btn btn-secondary">联系我们</a>
          </div>
        </div>
      </section>

      <!-- 特性介绍区域 -->
      <section class="features-section">
        <div class="section-title">
          <h2>我们的优势</h2>
          <p>AI-Blog 提供前沿技术与创新体验</p>
        </div>
        <div class="features-grid">
          <div class="feature-card">
            <div class="feature-icon">🤖</div>
            <h3>智能推荐</h3>
            <p>基于机器学习的个性化内容推荐</p>
          </div>
          <div class="feature-card">
            <div class="feature-icon">✍️</div>
            <h3>智能写作</h3>
            <p>AI辅助写作，提升创作效率</p>
          </div>
          <div class="feature-card">
            <div class="feature-icon">🌐</div>
            <h3>全球连接</h3>
            <p>跨越语言和地域的知识分享平台</p>
          </div>
        </div>
      </section>

      <!-- 技术介绍区域 -->
      <section class="tech-section">
        <div class="section-title">
          <h2>技术驱动力</h2>
          <p>我们的技术栈与创新方案</p>
        </div>
        <div class="tech-stack">
          <div class="tech-card">
            <img src="@/assets/icons/vue.svg" alt="Vue.js">
            <h3>Vue.js</h3>
            <p>现代化前端框架</p>
          </div>
          <div class="tech-card">
            <img src="@/assets/icons/python.svg" alt="Python">
            <h3>Python</h3>
            <p>强大的后端语言</p>
          </div>
          <div class="tech-card">
            <img src="@/assets/icons/ai.svg" alt="AI">
            <h3>机器学习</h3>
            <p>智能算法支持</p>
          </div>
        </div>
      </section>

      <!-- 详细介绍区域 -->
      <section id="detailed-intro" class="detailed-intro-section">
        <div class="section-title">
          <h2>深入了解 AI-Blog</h2>
          <p>革新博客体验，重塑知识分享</p>
        </div>
        
        <div class="detailed-content">
          <div class="intro-grid">
            <div class="intro-card">
              <div class="intro-icon">📊</div>
              <h3>智能分析</h3>
              <p>深入解析用户阅读习惯，提供精准的内容匹配和个性化推荐。我们的AI算法能够理解用户的兴趣偏好，不断优化推荐质量。</p>
            </div>
            
            <div class="intro-card">
              <div class="intro-icon">🔬</div>
              <h3>创新技术</h3>
              <p>融合最新的机器学习和自然语言处理技术，为用户提供智能写作辅助、内容翻译和摘要生成等前沿功能。</p>
            </div>
            
            <div class="intro-card">
              <div class="intro-icon">🌈</div>
              <h3>开放生态</h3>
              <p>构建开放、包容的知识分享平台。支持多语言、跨文化交流，连接全球创作者和读者，促进知识的自由流动。</p>
            </div>
          </div>
          
          <div class="mission-statement">
            <h3>我们的使命</h3>
            <p>
              AI-Blog致力于通过人工智能技术，降低知识创作和获取的门槛。
              我们相信，每个人都应该有机会分享自己的想法，获取有价值的信息。
              我们的平台不仅是一个博客网站，更是一个智能驱动的知识生态系统。
            </p>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<style scoped>
/* 全局滚动条样式 */
::-webkit-scrollbar {
  width: 10px; /* 设置滚动条宽度为10像素 */
}

/* 滚动条轨道样式：背景和圆角 */
::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05); /* 使用半透明白色背景 */
  border-radius: 10px; /* 添加圆角，使滚动条轨道更加美观 */
}

/* 滚动条滑块样式：渐变背景和圆角 */
::-webkit-scrollbar-thumb {
  background: linear-gradient(
    45deg, 
    rgba(46, 175, 210, 0.6), 
    rgba(179, 70, 163, 0.6)
  ); /* 使用蓝色和紫色的渐变背景 */
  border-radius: 10px; /* 添加圆角，使滑块更加柔和 */
  transition: all 0.3s ease; /* 添加平滑过渡效果 */
}

/* 滚动条滑块悬停效果：颜色加深 */
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    45deg, 
    rgba(46, 175, 210, 0.8), 
    rgba(179, 70, 163, 0.8)
  ); /* 悬停时增加背景颜色的不透明度，使颜色更深 */
}

/* 内容容器添加滚动属性 */
.content-wrapper {
  max-height: 100vh; /* 计算内容高度，减去导航栏高度 */
  overflow-y: auto; /* 允许垂直方向滚动 */
  scroll-behavior: smooth; /* 启用平滑滚动效果 */
}

/* 主容器样式：确保全屏高度和隐藏溢出 */
.info-container {
  height: 100vh; /* 设置容器高度为视窗高度 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  position: relative; /* 创建相对定位上下文 */
}

/* 背景动画固定定位：覆盖整个屏幕 */
.background-animation {
  position: fixed; /* 固定定位，不随滚动移动 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* 设置较低的层级，确保内容可见 */
}

/* 内容包装器：提高层级，确保内容在背景之上 */
.content-wrapper {
  position: relative;
  z-index: 10; /* 设置较高的层级 */
}

/* 背景动画样式：创建渐变和动态背景效果 */
.background-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* 多色渐变背景，使用透明色调 */
  background: linear-gradient(135deg, 
    rgba(46, 175, 210, 0.1) 0%, 
    rgba(207, 233, 88, 0.1) 50%, 
    rgba(179, 70, 163, 0.1) 100%
  );
  
  /* 背景尺寸和动画设置：创建缓慢移动的渐变效果 */
  background-size: 400% 400%;
  animation: gradientBG 20s ease infinite;
  
  /* 添加微妙的几何图形背景 */
  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.05; /* 设置低不透明度，增加微妙感 */
    
    /* 使用径向渐变创建点状背景 */
    background-image: 
      radial-gradient(#2eafd2 8%, transparent 8%),
      radial-gradient(#cfe958 8%, transparent 8%);
    background-position: 0 0, 50px 50px;
    background-size: 100px 100px;
    
    /* 缓慢移动背景 */
    animation: moveBackground 30s linear infinite;
  }
  
  /* 第二层背景，反向移动 */
  &::after {
    background-image: 
      radial-gradient(#b346a3 8%, transparent 8%),
      radial-gradient(#6a11cb 8%, transparent 8%);
    animation: moveBackground 40s linear infinite reverse;
  }
}

/* 背景动画：渐变位移 */
@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 背景动画：几何图形移动 */
@keyframes moveBackground {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(100px, 100px);
  }
}

/* 导航栏整体样式：固定顶部，动态渐变背景 */
.top-navbar {
  position: fixed; /* 固定定位，始终置顶 */
  top: 0;
  left: 0;
  width: calc(100% - 40px); /* 减去左右边距，保持居中 */
  height: 60px;
  margin: 10px 20px; /* 添加外边距创造圆角空间 */

  /* 动态渐变背景：使用三色渐变，从蓝色过渡到黄绿色，最后到紫色 */
  background: linear-gradient(135deg, #2eafd2 0%,#cfe958 50%,#b346a3 100%);
  
  /* 弹性布局：左右两侧对齐 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  /* 内边距和层叠顺序 */
  padding: 0 30px;
  z-index: 1000; /* 设置高层级，确保导航栏在其他元素之上 */
  
  /* 圆角和阴影效果：增加视觉层次感 */
  border-radius: 35px; /* 大圆角，使导航栏更加现代 */
  box-shadow: 
    0 10px 25px rgba(46, 175, 210, 0.2), /* 蓝色阴影 */
    0 15px 35px rgba(179, 70, 163, 0.15), /* 紫色阴影 */
    0 5px 15px rgba(207, 233, 88, 0.1); /* 黄绿色阴影 */
  
  /* 模糊效果：增加透明度和层次感 */
  backdrop-filter: blur(15px);
  
  /* 背景动画关键设置：创建动态渐变效果 */
  background-size: 200% 200%; /* 扩大背景尺寸，为动画做准备 */
  animation: gradientBG 10s ease infinite; /* 无限循环的背景动画 */
  
  /* 过渡效果，使阴影和圆角变化平滑 */
  transition: all 0.5s ease; /* 增加过渡时间 */
}

/* 导航栏缩放状态 */
.top-navbar.scaled {
  transform: scale(0.7); /* 整体缩小 */
  width: 4%; /* 长度缩小到原来的50% */
   /* 水平居中 */
  opacity: 0.8; /* 略微降低不透明度 */
}

/* 导航栏缩放时文字和按钮隐藏 */
.top-navbar.scaled .navbar-logo,
.top-navbar.scaled .navbar-menu {
  opacity: 0; /* 完全透明 */
  visibility: hidden; /* 隐藏元素 */
  transform: scale(0.7); /* 缩小 */
  transition: 
    opacity 0.3s ease, 
    visibility 0.3s ease,
    transform 0.3s ease;
}

/* 导航栏非缩放状态下文字和按钮显示动画 */
.top-navbar:not(.scaled) .navbar-logo,
.top-navbar:not(.scaled) .navbar-menu {
  opacity: 1; /* 完全可见 */
  visibility: visible; /* 显示元素 */
  transform: scale(1); /* 恢复原始大小 */
  transition: 
    opacity 0.5s ease, 
    visibility 0.5s ease,
    transform 0.5s ease;
}

/* Logo 样式：渐变文字效果和悬停动画 */
.navbar-logo {
  font-size: 22px; /* 设置字体大小 */
  font-weight: 700; /* 加粗 */
  color: #2c3e50; /* 基础文字颜色 */
  letter-spacing: 1px; /* 字母间距 */
  
  /* 创建渐变文字效果：从紫色到蓝色 */
  background: linear-gradient(45deg, #6a11cb 0%, #2575fc 100%);
  -webkit-background-clip: text; /* 裁剪背景到文字区域 */
  -webkit-text-fill-color: transparent; /* 使文字透明，显示背景 */
  
  /* 悬停缩放效果：轻微放大 */
  transition: transform 0.3s ease;
}

/* Logo 悬停效果：放大1.05倍 */
.navbar-logo:hover {
  transform: scale(1.05);
}

/* 菜单容器：弹性布局和间距 */
.navbar-menu {
  display: flex; /* 使用弹性布局 */
  gap: 25px; /* 菜单项间距 */
  align-items: center; /* 垂直居中 */
}

/* 菜单项基础样式：交互效果和过渡 */
.navbar-item {
  text-decoration: none; /* 移除下划线 */
  color: #34495e; /* 文字颜色 */
  font-weight: 500; /* 字体权重 */
  position: relative; /* 为伪元素定位 */
  
  /* 内边距和圆角，增加交互区域 */
  padding: 5px 10px;
  border-radius: 20px;
  
  /* 平滑过渡效果 */
  transition: all 0.3s ease;
}

/* 菜单项悬停效果：颜色、背景和位移 */
.navbar-item:hover {
  color: #ffffff; /* 悬停时文字变白 */
  background-color: rgba(64, 86, 101, 0.26); /* 轻微半透明背景 */
  transform: translateY(-2px); /* 轻微上移，增加交互感 */
}

/* 菜单项下划线效果：悬停时展开 */
.navbar-item::after {
  content: '';
  position: absolute;
  width: 0; /* 初始宽度为0 */
  height: 2px; /* 下划线高度 */
  bottom: -3px; /* 位置：文字底部 */
  left: 50%; /* 水平居中 */
  background-color: #6a11cb; /* 紫色下划线 */
  
  /* 下划线动画：平滑过渡 */
  transition: all 0.3s ease;
  transform: translateX(-50%); /* 水平居中 */
}

/* 悬停时下划线展开 */
.navbar-item:hover::after {
  width: 100%; /* 全宽展开 */
}

/* 首屏介绍区域：全屏居中布局 */
.hero-section {
  display: flex; /* 使用弹性布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  height: 100vh; /* 占满视窗高度 */
  text-align: center; /* 文字居中 */
  color: #2c3e50; /* 文字基础颜色 */
}

/* 首屏内容容器：限制最大宽度 */
.hero-content {
  max-width: 800px; /* 最大宽度 */
  padding: 0 20px; /* 左右内边距 */
}

/* 主标题：渐变文字效果 */
.hero-title {
  font-size: 48px; /* 大字体 */
  font-weight: 700; /* 加粗 */
  margin-bottom: 20px; /* 底部间距 */
  
  /* 使用蓝色到紫色的渐变文字 */
  background: linear-gradient(45deg, #2eafd2, #b346a3);
  -webkit-background-clip: text; /* 裁剪背景到文字区域 */
  -webkit-text-fill-color: transparent; /* 使文字透明，显示背景 */
}

/* 副标题：柔和颜色 */
.hero-subtitle {
  font-size: 24px; /* 中等字体 */
  color: #34495e; /* 柔和的深灰色 */
  margin-bottom: 30px; /* 底部间距 */
}

/* 行动按钮容器：居中和间距 */
.hero-cta {
  display: flex; /* 弹性布局 */
  justify-content: center; /* 水平居中 */
  gap: 20px; /* 按钮间距 */
}

/* 按钮基础样式 */
.btn {
  text-decoration: none; /* 移除下划线 */
  padding: 12px 24px; /* 内边距 */
  border-radius: 30px; /* 圆角 */
  font-weight: 600; /* 加粗 */
  transition: all 0.3s ease; /* 平滑过渡 */
}

/* 主要按钮：渐变背景 */
.btn-primary {
  background: linear-gradient(45deg, #2eafd2, #b346a3); /* 蓝紫渐变 */
  color: white; /* 白色文字 */
}

/* 次要按钮：边框样式 */
.btn-secondary {
  border: 2px solid #2eafd2; /* 蓝色边框 */
  color: #2eafd2; /* 蓝色文字 */
  background: transparent; /* 透明背景 */
}

/* 按钮悬停效果：轻微上移和阴影 */
.btn:hover {
  transform: translateY(-3px); /* 上移 */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* 柔和阴影 */
}

/* 特性介绍和技术栈区域：背景和间距 */
.features-section, 
.tech-section {
  padding: 100px 0; /* 垂直内边距 */
  background: rgba(255, 255, 255, 0.05); /* 半透明背景 */
}

/* 区域标题：居中和间距 */
.section-title {
  text-align: center; /* 文字居中 */
  margin-bottom: 50px; /* 底部间距 */
}

/* 区域标题主标题：大字体和颜色 */
.section-title h2 {
  font-size: 36px; /* 大字体 */
  color: #2c3e50; /* 深色 */
  margin-bottom: 10px; /* 底部间距 */
}

/* 区域标题副标题：柔和颜色 */
.section-title p {
  color: #34495e; /* 深灰色 */
}

/* 特性和技术栈网格：居中和间距 */
.features-grid,
.tech-stack {
  display: flex; /* 弹性布局 */
  justify-content: center; /* 水平居中 */
  gap: 30px; /* 卡片间距 */
}

/* 特性和技术栈卡片：半透明背景和过渡效果 */
.feature-card,
.tech-card {
  background: rgba(255, 255, 255, 0.1); /* 半透明背景 */
  backdrop-filter: blur(10px); /* 模糊效果 */
  border-radius: 15px; /* 圆角 */
  padding: 30px; /* 内边距 */
  text-align: center; /* 文字居中 */
  width: 300px; /* 固定宽度 */
  transition: all 0.3s ease; /* 平滑过渡 */
}

/* 卡片悬停效果：上移和阴影 */
.feature-card:hover,
.tech-card:hover {
  transform: translateY(-10px); /* 上移 */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); /* 阴影 */
}

/* 特性图标：大字体和间距 */
.feature-icon {
  font-size: 48px; /* 大图标 */
  margin-bottom: 20px; /* 底部间距 */
}

/* 技术栈图标：固定尺寸 */
.tech-card img {
  width: 80px; /* 宽度 */
  height: 80px; /* 高度 */
  margin-bottom: 20px; /* 底部间距 */
}

/* 卡片标题：颜色和间距 */
.feature-card h3,
.tech-card h3 {
  color: #2c3e50; /* 深色 */
  margin-bottom: 10px; /* 底部间距 */
}

/* 卡片描述：柔和颜色 */
.feature-card p,
.tech-card p {
  color: #34495e; /* 深灰色 */
}

/* 详细介绍区域：背景和内边距 */
.detailed-intro-section {
  padding: 100px 0; /* 垂直内边距 */
  background: rgba(255, 255, 255, 0.08); /* 半透明背景 */
}

/* 详细内容容器：限制最大宽度和居中 */
.detailed-content {
  max-width: 1200px; /* 最大宽度 */
  margin: 0 auto; /* 水平居中 */
  padding: 0 20px; /* 左右内边距 */
}

/* 详细介绍网格：居中和间距 */
.intro-grid {
  display: flex; /* 弹性布局 */
  justify-content: center; /* 水平居中 */
  gap: 30px; /* 卡片间距 */
  margin-bottom: 50px; /* 底部间距 */
}

/* 详细介绍卡片：半透明背景和过渡效果 */
.intro-card {
  background: rgba(255, 255, 255, 0.1); /* 半透明背景 */
  backdrop-filter: blur(10px); /* 模糊效果 */
  border-radius: 15px; /* 圆角 */
  padding: 30px; /* 内边距 */
  text-align: center; /* 文字居中 */
  width: 350px; /* 固定宽度 */
  transition: all 0.3s ease; /* 平滑过渡 */
}

/* 卡片悬停效果：上移和阴影 */
.intro-card:hover {
  transform: translateY(-10px); /* 上移 */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); /* 阴影 */
}

/* 详细介绍图标：大字体和渐变效果 */
.intro-icon {
  font-size: 48px; /* 大图标 */
  margin-bottom: 20px; /* 底部间距 */
  
  /* 使用蓝色到紫色的渐变 */
  background: linear-gradient(45deg, #2eafd2, #b346a3);
  -webkit-background-clip: text; /* 裁剪背景到文字区域 */
  -webkit-text-fill-color: transparent; /* 使文字透明，显示背景 */
}

/* 卡片标题：颜色和间距 */
.intro-card h3 {
  color: #2c3e50; /* 深色 */
  margin-bottom: 15px; /* 底部间距 */
}

/* 卡片描述：柔和颜色和行高 */
.intro-card p {
  color: #34495e; /* 深灰色 */
  line-height: 1.6; /* 增加行高，提高可读性 */
}

/* 使命陈述区域：背景和居中 */
.mission-statement {
  background: rgba(255, 255, 255, 0.05); /* 半透明背景 */
  border-radius: 15px; /* 圆角 */
  padding: 40px; /* 内边距 */
  text-align: center; /* 文字居中 */
}

/* 使命陈述标题：颜色和间距 */
.mission-statement h3 {
  color: #2c3e50; /* 深色 */
  margin-bottom: 20px; /* 底部间距 */
  font-size: 28px; /* 大字体 */
}

/* 使命陈述描述：柔和颜色、行高和居中 */
.mission-statement p {
  color: #34495e; /* 深灰色 */
  line-height: 1.8; /* 增加行高，提高可读性 */
  max-width: 800px; /* 限制最大宽度 */
  margin: 0 auto; /* 水平居中 */
}

/* 区域过渡效果相关样式 */
section {
  /* 移除过渡和硬件加速效果 */
  transition: none;
  will-change: auto;
  transform: none;
}

/* 隐藏的区域样式 */
.section-hidden {
  visibility: hidden;
  pointer-events: none; /* 禁用鼠标事件 */
}

/* 创建渐变边缘效果，让顶部和底部20%区域有渐变过渡 */
.content-wrapper::before,
.content-wrapper::after {
  content: '';
  position: fixed;
  left: 0;
  width: 100%;
  height: var(--fade-height, 150px);
  pointer-events: none;
  z-index: 15;
}

/* 顶部渐变边缘 */
.content-wrapper::before {
  top: 0;
  background: linear-gradient(to bottom, 
    rgba(255, 255, 255, 0.9) 0%, 
    rgba(255, 255, 255, 0) 100%
  );
}

/* 底部渐变边缘 */
.content-wrapper::after {
  bottom: 0;
  background: linear-gradient(to top, 
    rgba(255, 255, 255, 0.9) 0%, 
    rgba(255, 255, 255, 0) 100%
  );
}
</style>